import React,{Component} from "react";
import ChildClick from "./ChildClick";

export default class ParentClick extends Component{
    state = {
        showChild:true,
        name:""
    }

    f1 = (e)=>{
        this.setState({
            name:e.target.value
        },()=>{
            console.log(this.state.name)
        })
    }

    render(){
        return (
            <div style={{padding:'10px',backgroundClip:"#cfc",border:'1px solid #009900'}}> 
                <input type="text" size={12} placeholder="请输入" onChange={this.f1}/>欢迎{this.state.name}
                <h3>父组件</h3>
                <button onClick={()=>{this.setState({showChild:!this.state.showChild})}}>
                    隐藏显示子组件
                </button>
                <div style={{display:this.state.showChild ? 'block' : 'none'}}>
                    <ChildClick></ChildClick>
                </div>
                {this.state.showChild && <ChildClick/>}
            </div>
        )
    }
}